/*
 * @Author: silas 
 * @Date: 2021-08-25 15:14:37 
 * @Last Modified by: silas
 * @Last Modified time: 2021-08-26 15:22:16
 */
<template>
    <div class="tobBtoC">
        <div>
            <el-form
                :inline="true"
                :model="form"
                label-width="60px"
                class="formList"
            >
                <el-form-item label="账期" style="width: 15%">
                    <el-date-picker
                        style="width: 140px"
                        v-model="form.time"
                        type="year"
                        placeholder="选择账期"
                        value-format="yyyy"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item style="width: 40%;">
                    <el-button
                        style="margin-left: 20px"
                        size="mini"
                        type="primary"
                        @click="handle_search"
                        >查询</el-button
                    >
                    <!-- <el-button size="mini" type="orange" @click="handle_export()">
                        导出
                    </el-button> -->
                    <!-- <el-button size="mini" @click="dialogVisible = true; importForm.month = '';" >刷新数据</el-button> -->
                </el-form-item>
            </el-form>
        </div>
        <div class="table-content clearfix">
            <div class="content">
                <div class="tableBox">
                    <el-table
                        v-loading="tableLoading"
                        :data="tableData"
                        style="width: 100%"
                        class="tableTh28"
                        border
                        stripe
                        ref="table"
                    >
                        <el-table-column
                            width="120"
                            prop="areaName"
                            label="区域"
                        />
                        <el-table-column
                            width="280"
                            prop="value"
                            label="接入汇聚设备参考造价（XGPON下行端口）"
                        />
                    </el-table>
                </div>
            </div>
        </div>
       <el-dialog
            title="刷新数据"
            append-to-body
            :visible.sync="dialogVisible"
            width="300px"
        >
            <el-form :model="importForm" ref="importForm" :rules="rules">
                <el-form-item label="日期" prop="month" label-width="80px">
                    <el-date-picker
                        style="width: 140px;"
                        v-model="importForm.month"
                        type="month"
                        size="mini"
                        placeholder="选择年月"
                        value-format="yyyyMM"
                         :picker-options="pickerOptions"
                    ></el-date-picker>
                </el-form-item>
            </el-form>

            <div slot="footer">
                <div class="dialog-footer">
                    <el-button
                        size="mini"
                        type="primary"
                        @click="handle_refresh()"
                        >确定</el-button
                    >
                    <el-button size="mini" @click="dialogVisible = false"
                        >取消</el-button
                    >
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import prefixAPI from "@/api/prefixAPI";
import { getCookie } from "@/common/js/cookie";
import { getSessionStorage } from "@/common/js/storage";
import { $budgetAPI } from "@/api";
const exportUrl = prefixAPI.pack;
export default {
    name: "evaluate",
    data() {
        return {
            form: {
                time: "",
            },
            tableData: [],
            tableLoading: false,
            dialogVisible: false,
            importForm: {
                month: '',   
            },
            rules: {
                month: [
                    { required: true, message: "请选择日期", trigger: "blur" },
                ],
            },
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now() - 8.64e7;
                }
            },
        };
    },
    mounted() {},
    methods: {
        init() {
            let that = this;

            that.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
            that.form.areaId = that.accountInfo.areaId;
            that.form.time = that.moment().format("YYYY");
            that.getData();
        },
        getData() {
            var that = this;

            that.tableLoading = true;
            $budgetAPI.getDeviceList(
                {
                    acctYear: that.form.time,
                },
                (res) => {
                    if (res && res.code == 0) {
                        that.tableData = res.content;
                    }
                    that.tableLoading = false;
                }
            );
        },
        handle_search() {
            this.getData();
        },
        handle_export() {
            var month = this.form.time, 
                token = getCookie("token");
            
            window.open(`${exportUrl}/netWork/exportNetWorkEvaluaList?acctMonth=${month}&token=${token}`, "_self");
        },
        handle_refresh() {
            var that = this;
            
            that.$refs["importForm"].validate((valid) => {
                if (valid) {
                    $budgetAPI.lightEvlRefresh(
                        {
                            acctMonth: that.importForm.month
                        },
                        (res) => {
                            if (res.code == 0) {
                                that.$message({
                                    message: "刷新成功",
                                    type: "success",
                                });
                                that.getData();
                            } else {
                                that.$message.error(res.message);
                            }
                            that.dialogVisible = false;
                        },
                        (err) => {
                            that.dialogVisible = false;
                        }
                    );
                } else {
                    return false;
                }
            });

        },
    },
};
</script>

<style lang="scss" scoped>
.remark {
    padding-top: 5px;
    text-align: left;
    .attention {
        font-weight: bold;
    }
}
.table-content {
    .table-header {
        display: flex;
        justify-content: space-between;
        .table-title {
            font-size: 14px;
            font-weight: bold;
            height: 30px;
            line-height: 30px;
            span {
                display: inline-block;
                width: 5px;
                height: 5px;
                background-color: #418ee9;
                border-radius: 1000%;
                overflow: hidden;
                margin-right: 10px;
                margin-bottom: 3px;
            }
        }
    }
    .content {
        margin-top: 15px;
    }
}
</style>
